<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="viewport-fit=cover,width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title></title>
    <script src="../../../js/mui.min.js"></script>
    <link href="../../../css/mui.min.css" rel="stylesheet"/>
    <link rel="stylesheet" type="text/css" href="../../../css/reset.css" />
    <link rel="stylesheet" type="text/css" href="../../../css/tab.css"/>
<body>
<style>
    /*版本更新弹窗*/
    .updatePopMask{position: fixed; z-index: 999; left: 0; top: 0; right: 0; bottom: 0; width: 100%; height: 100%; background: rgba(0,0,0,.5);}
    .popUpdate{position: absolute; z-index: 999; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 80%; height: auto; border-radius: 5px; background: #fff; text-align: center; padding: 30px;}
    .updateInfo{ position: relative; padding: 25px 0 0;}
    .updateInfo img{ width: 200px;}
    .updateInfo h4{ font-size: 16px; font-weight: bold; color: #000; text-align: center; padding: 20px 0;}
    .updateInfo em{ display: inline-block; background: #EA2520; color: #fff; border-radius: 10px; font-size: 12px; padding: 0px 8px; height: 16px; line-height: 16px; margin-top: 10px;}
    .updateInfo p{ font-size: 13px; color: #9FA4AF;}
    .updateBtn{ display: flex; justify-content: space-around; margin-top: 40px;}
    .updateBtn a{ width: 40%;}
    .refuse_btn{ background: #fff; color: #999; height: 40px; line-height: 40px; font-size: 14px; border-radius: 20px; border: 1px solid #999;}
    .refuse_btn:active{ background: #F5F5F5;}
    #downLoading{display:none;height: 40px; line-height: 40px; background-color: #fff;border-radius: 20px;margin-top: 40px; border: 1px solid #fd4b46;}
    #downLoading span{font-size: 14px;color: #161A24;}
    #downLoading a{ color: rgba(0,0,0,.2); position: relative; z-index: 9;}
    .mui-progressbar span{ background: -webkit-linear-gradient(left, #fd4b46, #e9231e);}
    .tal{ text-align: left;}
</style>


<div id="updateData">
    <!--版本更新弹窗-->
    <div class="updatePopMask"></div>
    <div class="popUpdate">
        <div class="updateInfo">
            <img src="../../../images/update_pic.png" alt="" />
            <h4>发现新版本</br><em>V{{version_name}}</em></h4>
            <div class="tal" v-html="update_log">
            </div>
        </div>
        <div class="updateBtn">
            <a class="refuse_btn" @tap="jujueUpdate" v-show="errorCode == '1002'">{{btn1}}</a>
            <a class="update_btn" @tap="lijiUpdate">{{btn2}}</a>
        </div>
        <div id="downLoading" class="mui-progressbar" @tap="anzhuang">
            <a>进度0%</a>
            <span></span>
        </div>
    </div>
</div>


<script src="../../../js/vue.js"></script>
<script type="text/javascript" src="../../../js/jquery.min.js"></script>
<script>
    mui.init({
        swipeBack: false,
    });

    var upData;
    mui.plusReady(function () {
        var errorCode = plus.webview.currentWebview().errorCode;
        var version_name = plus.webview.currentWebview().version_name;
        var update_log = plus.webview.currentWebview().update_log;
        var url = plus.webview.currentWebview().url;
        upData = new Vue({
            el: '#updateData',
            data: {
                btn1:'残忍拒绝',
                btn2:'立即更新',
                errorCode: errorCode,
                version_name: version_name,
                update_log: update_log,
                url: url,
                wjUrl:'',
            },
            mounted() {
                if(errorCode != '1002'){
                    mui.back = function () {
                        mui.toast('您必须升级哦', {duration: '500',type:'div'});
                        return false;
                    }
                }
            },
            watch:{
                wjUrl:function (val,oldval) {
                    if(val !== ''){
                        this.btn2 = '点击安装';
                    }
                }
            },
            methods: {
                jujueUpdate: function () {
                    mui.back();
                },
                lijiUpdate: function () {
                    var self = this;
                    console.log(self.wjUrl);
                    if (mui.os.ios) {
                        location.href = 'http://itunes.apple.com/cn/app/id1438590495?mt=8';
                    } else if (mui.os.android) {
                        if(self.wjUrl !== ''){
                            self.installApk(self.wjUrl);
                        }else{
                            self.downWgtOrApk();
                        }
                    }
                },
                downWgtOrApk: function () {
                    var self = this;
                    mui.toast('开始下载...', {duration: '500',type:'div'});
                    //创建一个顶部进度条
                    $('.updateBtn').css('display','none');
                    $('#downLoading').css('display','block');
                    mui('#downLoading').progressbar({progress: 0}).show();
                    var task = plus.downloader.createDownload(self.url, {
                        filename: "_downloads/"
                    }, function (d, status) {
                        if (status == 200) {
                            mui.toast('下载成功，准备安装'+ d.filename, {duration: '600',type: 'div'});
                            self.installApk(d.filename); // 安装apk包
                            self.wjUrl = d.filename;
                        } else {
                            mui.toast('下载失败...', {duration: '3000',type: 'div'});
                        }
                    })

                    task.addEventListener("statechanged", function (download, status) {
                        switch (download.state) {
                            case 2:
                                mui.toast('服务器连接成功...', {duration: '500',type:'div'});
                                break;
                            case 3:
                                setTimeout(function () {
                                    mui.toast('下载中...', {duration: '500',type:'div'});
                                    var percent = download.downloadedSize / download.totalSize * 100;
                                    $('#downLoading a').html('进度'+ parseInt(percent) + "%");
                                    mui('#downLoading').progressbar().setProgress(parseInt(percent));
                                }, 0);
                                break;
                            case 4:
                                mui.toast('下载完成，准备安装...', {duration: '500',type:'div'});
                                $('.updateBtn').css('display','flex');
                                $('#downLoading').css('display','none');
                                console.log(self.wjUrl);
                                if(self.wjUrl != ''){
                                    self.btn2 = '点击安装';
                                }
                                mui('#downLoading').progressbar().hide();
                                break;
                        }
                    });
                    task.start();
                },
                installApk: function (path) {
                    plus.runtime.install(path, {}, function () {
                        mui.toast('应用安装成功', {duration: '3000',type: 'div'});
                    }, function (e) {
                        plus.nativeUI.closeWaiting();
                        plus.nativeUI.alert("安装apk文件失败[" + e.code + "]：" + e.message);
                    });
                },
                anzhuang:function () {
                    this.installApk(this.wjUrl);
                }
            },
        })
    })
</script>

</head>


</body>
</html>